<template>
  <div style="display: flex;line-height: 60px">
    <div style="margin-top: 8px;cursor: pointer">
      <i :class="icon" style="font-size: 20px;line-height: 60px" @click="collapse"></i>
    </div>
    <div style="flex: 1;text-align: center;font-size: 34px">
      <span>欢迎来到仓库管理系统</span>
    </div>
    <el-header style="text-align: right; font-size: 12px">
      <el-dropdown>
        <i class="el-icon-arrow-down" style="margin-left: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="toUser">个人中心</el-dropdown-item>
          <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span>{{ user.name }}</span>
    </el-header>
  </div>
</template>

<script>
export default {
  name: "Main-header",
  data () {
    return {
      user: JSON.parse (sessionStorage.getItem ("CurUser"))
    }
  },
  props: {
    icon: String
  },
  methods: {
    toUser () {
      this.$router.push ("/Home")
    },
    logout () {
      window.alert ("退出登录")

      this.$router.push ("/")

      sessionStorage.clear ()
    },
    collapse () {
      this.$emit ('doCollapse')
    }
  }
}
</script>

<style scoped>

</style>
